<!-- 点单页面-购物车组件 -->
<template>
	<view class="shopping-cart" v-show="true">
		<u-row>
			<u-col span="11" offset="0.5">
				<view class="cart-body">
					<u-row>
						<u-col span="3">
							<view class="cart-icon">
								<view class="icon">
									<u-icon name="../../static/icon/selfOrderingMachine/gouwudai.png" width="130rpx" height="175rpx"></u-icon>
									
									<u-badge absolute max="99" value="1" bgColor="red" :offset="[125+'rpx',20+'rpx']"></u-badge>
								</view>
							</view>
						</u-col>
						<u-col span="5">
							<view class="cart-price">
								<span >￥</span><span class="price">9.90</span>
							</view>
						</u-col>
						<u-col span="4" >
							<view class="cart-settleAccounts">
								<view class="cart-botton">
									<u-button shape="circle" size="large" color="#FF8732">去结算</u-button>
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	export default {
		name:"shoppingCart",
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	//购物车总体框架
	.shopping-cart{
		height: 180rpx;
		position: fixed;  //固定底部位置
		bottom: 0;  
		left: 0;  
		right: 0; 
		
		//购物车与决算列表框体
		.cart-body{
			height: 130rpx;
			background-color: #502314;
			border-radius: 130rpx;
			
			//购物车图片
			.cart-icon{
				display: flex;
				justify-content: flex-end;
				height: 130rpx;
				
				.icon{
					align-self:flex-end;
					position: relative;
				}
				
			}
			
			//购物车价格展示
			.cart-price{
				color: white;
				font-weight: bold;
				

				
				//金额
				.price{
					font-size: 60rpx;
					font-family: "Verdana";
				}
				
			}
			
			//购物车结算按钮框体
			.cart-settleAccounts{
				
				
				//结算按钮
				.cart-botton{
					width: 90%;
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		}
	}
</style>